// import item from 'element-ui';
<template>
  <div class="navbar">
    <el-menu :default-active="this.$router.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        <i :class="item.iconCls"></i>
        <span slot="title">{{item.navItem}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "navbar",
    data() {
      return {
        navList: [{
            name: "/list",
            navItem: "列表",
            iconCls: "el-icon-menu"
          },
          {
            name: "/additem",
            navItem: "添加详情",
            iconCls: "el-icon-document"
          }
        ]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {}
  .el-menu-item.is-active {}
  .navbar .el-menu {
    height: 100%;
  }
  .el-menu-item.is-active {
    color: #20a0ff!important;
  }
</style>
